import { AlertCircle, ArrowRight, Lock, Shield, Smartphone } from "lucide-react";
import { useId } from "react";
import { useLogin } from "./use-login";

export default function LoginPage() {
  const { phone, setPhone, vcode, setVcode, countdown, error, isLoading, handleSendVcode, handleSubmit } = useLogin();
  const phoneInputId = useId();
  const vcodeInputId = useId();

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-100 flex items-center justify-center p-4 relative overflow-hidden">
      {/* Background Elements */}
      <div className="absolute top-20 left-20 w-72 h-72 bg-gradient-primary rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"></div>
      <div
        className="absolute bottom-20 right-20 w-72 h-72 bg-gradient-secondary rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse"
        style={{ animationDelay: "2s" }}
      ></div>
      <div
        className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-accent rounded-full mix-blend-multiply filter blur-xl opacity-10 animate-pulse"
        style={{ animationDelay: "4s" }}
      ></div>

      <div className="card w-full max-w-lg bg-white/80 backdrop-blur-xl shadow-2xl border border-white/20 animate-fade-in relative z-10">
        <div className="card-body p-8">
          {/* Header */}
          <div className="text-center mb-8">
            <div className="w-16 h-16 bg-gradient-primary rounded-2xl flex items-center justify-center mx-auto mb-4">
              <Lock className="h-8 w-8 text-white" />
            </div>
            <h1 className="text-3xl font-bold bg-gradient-primary bg-clip-text text-transparent mb-2">欢迎回来</h1>
            <p className="text-gray-600">请登录您的账户继续体验</p>
          </div>

          <form onSubmit={handleSubmit} className="space-y-6">
            {/* Phone Number Input */}
            <div className="form-control animate-slide-in">
              <label htmlFor={phoneInputId} className="label">
                <span className="label-text font-medium text-gray-700">手机号</span>
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <Smartphone className="h-5 w-5 text-gray-400" />
                </div>
                <input
                  id={phoneInputId}
                  type="tel"
                  placeholder="请输入手机号码"
                  value={phone}
                  onChange={(e) => setPhone(e.target.value)}
                  disabled={countdown > 0}
                  className={`input input-bordered w-full pl-10 bg-white/50 border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 ${
                    countdown > 0 ? "input-disabled" : "hover:border-primary/50"
                  } transition-all duration-200`}
                  maxLength={11}
                />
              </div>
            </div>

            {/* Verification Code Input */}
            <div className="form-control animate-slide-in" style={{ animationDelay: "0.1s" }}>
              <label htmlFor={vcodeInputId} className="label">
                <span className="label-text font-medium text-gray-700">验证码</span>
              </label>
              <div className="flex gap-3">
                <div className="relative flex-1">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <Shield className="h-5 w-5 text-gray-400" />
                  </div>
                  <input
                    id={vcodeInputId}
                    type="text"
                    placeholder="请输入验证码"
                    value={vcode}
                    onChange={(e) => setVcode(e.target.value)}
                    disabled={isLoading}
                    className={`input input-bordered w-full pl-10 bg-white/50 border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 ${
                      isLoading ? "input-disabled" : "hover:border-primary/50"
                    } transition-all duration-200`}
                    maxLength={6}
                  />
                </div>
                <button
                  type="button"
                  onClick={handleSendVcode}
                  disabled={countdown > 0 || isLoading}
                  className={`btn min-w-[120px] ${
                    countdown > 0 || isLoading ? "btn-disabled" : "btn-outline btn-primary hover-lift"
                  } transition-all duration-200`}
                >
                  {countdown > 0 ? (
                    <span className="flex items-center gap-2">
                      <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
                      {countdown}秒
                    </span>
                  ) : (
                    "发送验证码"
                  )}
                </button>
              </div>
            </div>

            {/* Error Message */}
            {error && (
              <div className="alert alert-error bg-red-50 border border-red-200 animate-fade-in">
                <AlertCircle className="h-5 w-5 stroke-red-600" />
                <span className="text-red-800">{error}</span>
              </div>
            )}

            {/* Submit Button */}
            <button
              type="submit"
              disabled={isLoading}
              className={`btn w-full btn-lg ${
                isLoading ? "btn-disabled" : "btn-primary bg-gradient-primary border-0 hover-lift"
              } transition-all duration-200 animate-slide-in`}
              style={{ animationDelay: "0.2s" }}
            >
              {isLoading ? (
                <span className="flex items-center justify-center gap-3">
                  <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                  登录中...
                </span>
              ) : (
                <span className="flex items-center justify-center gap-2">
                  <ArrowRight className="h-5 w-5" />
                  登录
                </span>
              )}
            </button>
          </form>

          {/* Footer */}
          <div className="text-center mt-8 animate-fade-in" style={{ animationDelay: "0.3s" }}>
            <p className="text-gray-600">
              还没有账户？
              <a
                href="/register"
                className="text-primary hover:text-primary/80 font-medium ml-1 transition-colors duration-200"
              >
                立即注册
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}
